<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="lib/vue.js"></script>
</head>
<body>
<div id="root">
  <!--  字符串  -->
      <p v-for="item in str" :key="item">{{item}}</p>
      <p v-for="(item,i) in str" :key="i">{{item}}|{{i}}</p>
  <!--  数字  -->
      <p v-for="item in num" :key="item">{{item}}</p>
      <p v-for="(a,b) in num" :key="'suibian'+a">{{a}}|{{b}}</p>
  <!--  对象  -->
      <p v-for="item in obj" :key="item">{{item}}</p>
      <p v-for="(value,key) in obj" :key="key">{{value}}|{{key}}</p>
  <!--  数组  -->
      <p v-for="item in arr" :key="item">{{item}}</p>
      <p v-for="(item,index) in arr" :key="'key'+index">{{item}}|{{index}}</p>
</div>
</body>
<script>
  new Vue({
    el:"#root",
    data:{
      str:"中华人民共和国",
      num:10,
      obj:{
        username:"zhangsan",
        age:12
      },
      arr:[1,2,3,4]

    }
  })
</script>
</html>